// 监听滚动条，出现导航栏

window.addEventListener("scroll", function () {
  var navbar = this.document.querySelector(".top");
  let list = this.document.querySelector(".list");
  var right = this.document.querySelector("#hot");
  var news = this.document.querySelector("#news");
  var returntop = this.document.querySelector(".return-top");

  if (this.window.scrollY > 380) {

  navbar.style.transform = "translateY(00%)";
  navbar.style.opacity = 1;
  list.style.position = "fixed";
  right.style.position = "fixed";
  list.style.top = "50px";
  news.style.position = "relative";
  news.style.left = "18.8%";
  right.style.top = "50px";
  returntop.style.opacity = "1";
  } else {
    navbar.style.transform = "translateY(-100%)";
    navbar.style.opacity = 0;
  list.style.position = "static";
  right.style.position = "static";
  news.style.position = "static";
  returntop.style.opacity = "0";
  }
});

function assessBtn() {
  var assess = document.getElementsByClassName("assess");
  var news = document.getElementsByClassName("news");

  var commentBtn = document.getElementsByClassName("comment-btn");
  for (let i = 0; i < assess.length; i++) {
    assess.num = i;
    news.num = i;
    commentBtn.num = i;
  }
  let click = 0;
  for (let i = 0; i < assess.length; i++) {
    assess[i].onclick = function () {
      let bid = assess[i].getAttribute("bid");

      let spread = news[i].querySelector(".spread");
      if (click == 0) {
        spread.style.display = "block";
        click = 1;
      } else {
        click = 0;
        spread.style.display = "none";
      }
      // 点击更多回复，显示数据的思路
      // 由于接口需要传递文章id,则需要属性来记录文章id来获取评论所有数据
      // 再获取当前按钮所在一级评论的索引值,才能获取
      // 发送ajax请求
      $.ajax({
        url: `/weibo/blog/getBlogComment?id=${bid}`,
        type: "get",
        success: function (result) {
          console.log(result);
          let comment = news[i].querySelector(".comment");
          comment.innerHTML = "";

          for (let i = 0; i < result.length; i++) {
            if (result[i].likes == 0) {
              result[i].likes = "";
            }
            comment.innerHTML =
              comment.innerHTML +
              ` <div class="item1" cid="${result[i].id}">
              <div class="comment-list">
                <a href="">
                 <div class="comment-head">
                    <img
                     
                      src="${result[i].userAvatarUrl}"
                      alt=""
                     />
                  </div>
                </a>
                <div class="comment-details">
                  <a href="" class="comment-name"> <span>${setText(
                    result[i].username
                  )}</span> </a>:
                  <span class="c-content">${setText(result[i].comment)}</span>
                <div class="comment-bottom">
                   <div class="c-time">${result[i].publishTime}   ${setText(
                result[i].address
              )}</div>
                   <div class="comment-fn">
                      <div class="c-complain" otherId=${
                        result[i].otherId
                      } cid="${
                result[i].id
              }" onclick="removeFirstComment(this)">

                     
                      </div>
                      <div class="reply" cid=${result[i].id} logid=${
                result[i].uid
              }>
                        <i class="iconfont">&#xe695;</i>
                      </div>
                      <div class="c-like" onclick="likeComment(this)"  cid=${
                        result[i].id
                      }>
                        <i class="iconfont">&#xe600;</i><span>${
                          result[i].likes
                        }</span>
                      </div>
                    </div> 
                  </div>
                </div>
              </div>
           `;
          }
          let item1 = news[i].getElementsByClassName("item1");
          for (let i = 0; i < result.length; i++) {
            // 二级评论的数据（数组）

            console.log("评论展开" + item1.length);
            let list = result[i].list;
            console.log(list);
            if (result[i].likes == 0) {
              result[i].likes = " ";
            }

            if (list.length > 0) {
              for (let j = 0; j < 1; j++) {
                if (list[j].likes == 0) {
                  list[j].likes = "";
                }
                item1[i].innerHTML =
                  item1[i].innerHTML +
                  `<div class="list2" cid=${list[j].id}>
            <div class="list2-bar"></div>
            <div class="list2-details">
              <a href="" class="list2-name"><span>${setText(
                list[j].username
              )}:</span></a>
              <span class="list2-content">${setText(list[j].comment)}</span>
            </div>
            <div class="list2-bottom">
              <div class="list2-time">${list[j].publishTime}  ${
                    list[j].address
                  }</div>
                <div class="list2-fn">
                
                
                <div class="list2-like" onclick="likeComment(this)" cid=${
                  list[j].id
                }>
                  <i class="iconfont">&#xe600;</i> <span>${list[j].likes}</span>
                </div>
              </div>
      </div>
            </div>
          </div>`;
              }

              // 下面循环结尾多一个</div>是对item1进行结尾
              if (list.length > 1) {
                item1[i].innerHTML =
                  item1[i].innerHTML +
                  `<div class="list2-more ">
            <div class="list2-bar"></div>
                 <a href="javascript:;" class="more-reply" id=${bid} index=${i}>共${list.length}条回复</a>
                 <i class="iconfont bottom">&#xe62e;</i>
               </div>
             </div>`;
              } else {
                comment.innerHTML = comment.innerHTML + `</div>`;
              }
            }
            more();
            ban();
          }
        },
        error: function () {
          console.log("失败");
        },
      });
    };
  }
  let commentddl = document.getElementsByClassName("comment-ddl");
  let commentText = document.getElementsByClassName("comment-text");
  for (let i = 0; i < commentText.length; i++) {
    commentText[i].addEventListener("input", function () {
      if (commentText[i].value == "") {
        commentBtn[i].setAttribute("disabled", true);
        commentBtn[i].classList.add("disable");
      } else {
        commentBtn[i].removeAttribute("disabled", true);
        commentBtn[i].classList.remove("disable");
      }

      this.style.height = `${this.scrollHeight}px`;
      // commentBtn[i].onclick;
    });
    commentText[i].onkeyup = function () {
      commentddl[i].innerHTML = `还可输入${
        140 - commentText[i].value.length
      }字`;
      if (commentText[i].value.length >= 140) {
        commentddl[i].innerHTML = "还可输入0字";
        commentText[i].value = commentText[i].value.substr(0, 140);
      }
    };
  }

  let replybutton = document.querySelector(".reply-btn");
  replybutton.onclick = function () {
    showCustomAlert("请先进行登录!");
  };
}
// 点击评论展开详细信息并发送ajax请求
assessBtn();
// 搜索框获得焦点，展出下拉部分
let searchList = document.querySelector(".search-list");
let topinput = document.querySelector("#top-input");
let icon = document.querySelector(".top-search").querySelector(".iconfont");
topinput.addEventListener("blur", function () {
  searchList.style.display = "none";
  icon.style.color = "black";
});
topinput.addEventListener("focus", function () {
  searchList.style.display = "block";
  icon.style.color = "#ff8200";
});

// 关注
function payattention() {
  let attention = document.getElementsByClassName("top-attention");
  for (let i = 0; i < attention.length; i++) {
    let btn = attention[i].querySelector(".top-attention-btn");
    btn.onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
  }
}
payattention();

// let attention = document.getElementsByClassName("top-attention");
// for (let i = 0; i < attention.length; i++) {
//   let btn = attention[i].querySelector(".top-attention-btn");
//   btn.onclick = function () {
//     btn.innerHTML = `
//     <i class="iconfont">&#xe664;</i>已经关注
//   `;
//     btn.setAttribute("disabled", true);
//     btn.classList.add("already");
//     attention[i].style.pointEvents = "none";
//   };
// }
// 未登录进行操作时禁止操作
// 点赞禁止

// 由于评论展开前页面无法获取该元素
// 则使用方法包装之后在aiax请求中引用
function ban() {
  let cCompalin = document.getElementsByClassName("c-complain");
  let cLike = document.getElementsByClassName("c-like");
  let reply = document.getElementsByClassName("reply");
  let searchBtn = document.querySelector(".search-btn");
  let likes = document.getElementsByClassName("like");
  let shares = document.getElementsByClassName("share");
  for (let i = 0; i < likes.length; i++) {
    likes[i].onclick = function () {
      return showCustomAlert("请先进行登录");
    };
    shares[i].onclick = function () {
      return showCustomAlert("请先进行登录");
    };
  }
  let fn = document.getElementsByClassName("fn");
  for (let i = 0; i < fn.length; i++) {
    fn[i].onclick = function () {
      return showCustomAlert("请先进行登录");
    };
  }
  for (let i = 0; i < reply.length; i++) {
    reply[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
    cLike[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
    cCompalin[i].onclick = function () {
      return showCustomAlert("请先登录再进行该操作");
    };
  }
  searchBtn.onclick = function () {
    return showCustomAlert("请先登录再进行该操作");
  };
}
ban();
// 更多回复的弹窗
function more() {
  let moreReply = document.getElementsByClassName("more-reply");
  let moreMask = document.querySelector(".more-reply-mask");
  console.log(moreReply);
  for (let i = 0; i < moreReply.length; i++) {
    moreReply[i].onclick = function () {
      console.log(111);
      let val = moreReply[i].getAttribute("id");
      let index = moreReply[i].getAttribute("index");
      moreMask.style.display = "flex";
      document.body.style.overflow = "hidden";
      let contentComment = moreMask.querySelector(".content-comment");
      // 获取ajax请求,显示评论
      $.ajax({
        url: `/weibo/blog/getBlogComment?id=${val}`,
        type: "get",
        success: function (result) {
          console.log("弹窗成功");
          // 一级及二级评论的数据
          let item1 = result[index];
          let list = item1.list;
          contentComment.innerHTML = " ";
          contentComment.innerHTML =
            contentComment.innerHTML +
            `<div class="window-item1">
            <div class="item1-list">
          <a href="">
            <div class="item1-head">
              <img src="${item1.userAvatarUrl}" alt="" />
            </div>
          </a>
          <div class="item1-details">
            <a href="" class="details-name"><span>${item1.username}</span></a>
            <span>:</span>
            <span class="details-content">${item1.comment}</span>
            <div class="item1-bottom">
              <div class="bottom-time">${item1.publishTime}  ${item1.address}</div>
            </div>
          </div>
        </div>
        </div>`;
          for (let j = 0; j < list.length; j++) {
            contentComment.innerHTML =
              contentComment.innerHTML +
              ` <div class="window-list2">
            <div class="window-list2-bar"></div>
            <div class="window-list2-details">
              <a href="" class="window-list2-name">
                <span>${list[j].username}</span>
                <span>:</span>
              </a>
              <span class="window-list2-content">${list[j].comment} </span>
            </div>
            <div class="window-list2-bottom">
              <div class="window-list2-time">${list[j].publishTime}${list[j].address}</div>
            </div>
          </div>`;
          }
        },
        error: function (error) {
          console.log("失败");
        },
      });
    };
  }
  // 取消回复弹窗
  let windowCancel = document.querySelector(".window-top-cancel");
  windowCancel.onclick = function () {
    moreMask.style.display = "none";
    document.body.style.overflow = "inherit";
  };
  console.log("成功");
}

//监听搜索框输入的值来获取后端返回的数据并渲染
let searchInput = document.querySelector("#top-input");
searchInput.addEventListener("input", function () {
  let searchText = searchInput.value;
  $.ajax({
    url: `/blog/searchBlog?condition=${searchText}`,
    method: "get",

    success: function (result) {
      console.log("搜索成功");
      console.log(result);
    },
    error: function (result) {
      console.log("搜索失败");
    },
  });
});

localStorage.clear();
// 预览图片
function showModel(img) {
  console.log("预览图片");
  let model = document.getElementById("model");
  let modelImg = document.getElementById("model-img");
  model.style.display = "flex";
  modelImg.src = img.src;
  document.body.style.overflow = "hidden";
}
function hideModel() {
  let model = document.getElementById("model");
  model.style.display = "none";
  document.body.style.overflow = "";
}

// 翻滚加载(热搜部分)
// 思路;向下翻滚，页数加一，请求发送一次，渲染一次
var currentPage = 1;
// 判断数据是否为0
function judge(data) {
  if (data.transmit == 0) {
    data.transmit = "分享";
  }
  if (data.likes == 0) {
    data.likes = "点赞";
  }
  if (data.comment == 0) {
    data.comment = "评论";
  }
}
function getrestMsg() {
  $(window).scroll(function () {
    if (
      Math.round($(window).scrollTop() + $(window).height()) ==
      $(document).height() - 5
    ) {
      currentPage++;
      if (currentPage == 4) {
        return showCustomAlert("请先登录再查看更多内容");
      }
      $.ajax({
        url: `/weibo/blog/getTheLoadedBlog?pageNo=${currentPage}&pageSize=10`,
        type: "get",
        data: {},
        success: function (result) {
          console.log(result);
          let allnews = document.querySelector("#news");
          if (result.length == 10) {
            console.log(result.length);
            for (let i = 0; i < result.length; i++) {
              judge(result[i]);
              allnews.innerHTML += `<div class="news add" uid="${result[i].uid}" bid="${result[i].id}">
          <div class="news-top">
            <a th:href="@{/user/toOnesInfo(id=${result[i].uid})}" class="head-link">
              <div class="head">
                <img
                        src="${result[i].userAvatarUrl}"
                        alt=""
                />
              </div>
            </a>
            <div class="top-details">
              <a href="" class="name">
                <p >${result[i].username}</p>
              </a>
              <p class="time">${result[i].time}</p>
            </div>
            <div class="top-attention">
              <button class="top-attention-btn">
                <i class="iconfont">&#xe7df;</i>关注
              </button>
            </div>
          </div>
          <div class="news-container">
            <div  class="container">
              <span class="container-text" >${result[i].text}</span>

              <span class="collapse">收起</span>
            </div>

            <div class="news-content">
            </div>
          </div>
          <!-- 底部博文功能 -->
          <div class="foot">
            <div class="share">
              <i class="iconfont">&#xe62f;</i>
              <span
                      
              >${result[i].transmit}</span
              >
            </div>
            <div class="assess" bid="${result[i].id}">
              <i class="iconfont">&#xe695;</i>
              <span 
              >${result[i].comment}</span
              >
            </div>
            <div class="store">
            <i class="iconfont">&#xe647;</i>
            <span>收藏</span>
          </div>
            <div class="like">
              <i class="iconfont">&#xe62b;</i>
              <span 
              >${result[i].likes}</span
              >
            </div>
          </div>
          <!-- 点击评论展开评论信息 -->
          <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
            <span class="comment-ddl">还可输入140字</span>
            <button class="comment-btn disable">评论</button>
            <!-- 评论 -->
            <div class="comment">
              <!-- 一级评论 -->
              <div class="item1">
                <div class="comment-list">
                  <a href="">
                    <div class="comment-head">
                      <img
                              src="../img/banner.jpg"
                              th:src="@{/static/img/banner.jpg}"
                              alt=""
                      />
                    </div>
                  </a>
                  <div class="comment-details">
                    <a href="" class="comment-name"> <span>XXX</span> </a>:
                    <span class="c-content">今天天气真好1</span>
                    <div class="comment-bottom">
                      <div class="c-time">3-18</div>
                      <div class="comment-fn">
                        <div class="c-complain">
                          <i class="iconfont">&#xe6a9;</i>
                        </div>
                        <div class="reply">
                          <i class="iconfont">&#xe695;</i>
                        </div>
                        <div class="c-like">
                          <i class="iconfont">&#xe600;</i>
                          12
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 二级评论 -->
                <div class="list2">
                  <div class="list2-bar"></div>
                  <div class="list2-details">
                    <a href="" class="list2-name"><span>XXX:</span></a>
                    <span class="list2-content">1111111111</span>
                  </div>
                  <div class="list2-bottom">
                    <div class="list2-time">3-18</div>
                  </div>
                </div>

                <div class="list2">
                  <a class="more-reply"
                  >共2条回复
                    <i class="iconfont">&#xe62e;</i>
                  </a>
                </div>
              </div>
              <!-- 二级评论 -->
            </div>
          </div>
        </div>`;
              let add = document.getElementsByClassName("add")[i];
              let content = add.querySelector(".news-content");
              let picture = result[i].pictureUrl;
              if (picture.length > 0) {
                for (let j = 0; j < picture.length; j++) {
                  content.innerHTML += `<div class="news-content-img"  >
          <img src="${picture[j]}"alt="" onclick="showModel(this)">
        </div>`;
                }
              }
            }
          } else if (result.length > 0 && result.length < 10) {
            for (let i = 0; i < result.length; i++) {
              judge(result[i]);
              allnews.innerHTML += `<div class="news add" uid="${result[i].uid}" bid="${result[i].id}">
          <div class="news-top">
            <a th:href="@{/user/toOnesInfo(id=${result[i].uid})}" class="head-link">
              <div class="head">
                <img
                        src="${result[i].userAvatarUrl}"
                        alt=""
                />
              </div>
            </a>
            <div class="top-details">
              <a href="" class="name">
                <p >${result[i].username}</p>
              </a>
              <p class="time">${result[i].time}</p>
            </div>
            <div class="top-attention">
              <button class="top-attention-btn">
                <i class="iconfont">&#xe7df;</i>关注
              </button>
            </div>
          </div>
          <div class="news-container">
            <div  class="container">
              <span class="container-text" >${result[i].text}</span>

              <span class="collapse">收起</span>
            </div>

            <div class="news-content">
            </div>
          </div>
          <!-- 底部博文功能 -->
          <div class="foot">
            <div class="share">
              <i class="iconfont">&#xe62f;</i>
              <span
                      
              >${result[i].transmit}</span
              >
            </div>
            <div class="assess" th:bid="${result[i].id}">
              <i class="iconfont">&#xe695;</i>
              <span 
              >${result[i].comment}</span
              >
            </div>
            <div class="store">
              <i class="iconfont">&#xe647;</i>
              <span>收藏</span>
            </div>
            <div class="like">
              <i class="iconfont">&#xe62b;</i>
              <span 
              >${result[i].likes}</span
              >
            </div>
          </div>
          <!-- 点击评论展开评论信息 -->
          <div class="spread">
            <textarea
                    placeholder="请发布你的评论"
                    class="comment-text"
            ></textarea>
            <span class="comment-ddl">还可输入140字</span>
            <button class="comment-btn disable">评论</button>
            <!-- 评论 -->
            <div class="comment">
              <!-- 一级评论 -->
              <div class="item1">
                <div class="comment-list">
                  <a href="">
                    <div class="comment-head">
                      <img
                              src="../img/banner.jpg"
                              th:src="@{/static/img/banner.jpg}"
                              alt=""
                      />
                    </div>
                  </a>
                  <div class="comment-details">
                    <a href="" class="comment-name"> <span>XXX</span> </a>:
                    <span class="c-content">今天天气真好1</span>
                    <div class="comment-bottom">
                      <div class="c-time">3-18</div>
                      <div class="comment-fn">
                        <div class="c-complain">
                          <i class="iconfont">&#xe6a9;</i>
                        </div>
                        <div class="reply">
                          <i class="iconfont">&#xe695;</i>
                        </div>
                        <div class="c-like">
                          <i class="iconfont">&#xe600;</i>
                          12
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 二级评论 -->
                <div class="list2">
                  <div class="list2-bar"></div>
                  <div class="list2-details">
                    <a href="" class="list2-name"><span>XXX:</span></a>
                    <span class="list2-content">1111111111</span>
                  </div>
                  <div class="list2-bottom">
                    <div class="list2-time">3-18</div>
                  </div>
                </div>

                <div class="list2">
                  <a class="more-reply"
                  >共2条回复
                    <i class="iconfont">&#xe62e;</i>
                  </a>
                </div>
              </div>
              <!-- 二级评论 -->
            </div>
          </div>
        </div>`;
              let add = document.getElementsByClassName("add")[i];
              let content = add.querySelector(".news-content");
              let picture = result[i].pictureUrl;
              if (picture.length > 0) {
                for (let j = 0; j < picture.length; j++) {
                  content.innerHTML += `<div class="news-content-img"  >
          <img src="${picture[j]}"alt="" onclick="showModel(this)">
        </div>`;
                }
              }
            }
            allnews.innerHTML += `<p class="none">暂时没有其他内容了</p>`;
          }
          more();
          assessBtn();
          ban();
          payattention();
          replyWindow();
          collapsefn();
        },
      });
    }
  });
}
getrestMsg();
function setText(val) {
  let msg = val.replace(/</g, "&lt;").replace(/>/g, "&gt;"); //执行替换成空字符
  msg = msg.replace(/\s/g, ""); //去掉所有的空格（中文空格、英文空格都会被替换）
  //去掉所有的换行符
  return msg; //获文本文字内容的前100个字符
}
